<template>
  <div class="webchatSummaryBox">
    <div class="webchatSummary" :class="{empty: isEmpty}">
      <div class="webchatSummaryContent">
        <div class="content" v-show="!isEmpty" :style="{ width: containerType === 'v7Cloud' ? '62%' : '100%' }">
          <webchatHead :webchatInfo="webchatInfo"></webchatHead>
          <!-- <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="horizontal">
            <template slot="paneL">
              <webchatContentBox :webchatInfo="webchatInfo"></webchatContentBox>
            </template>
            <template slot="paneR">
              <webchatSendMsg class="webchatSendMsgBox" :webchatInfo="webchatInfo"></webchatSendMsg>
            </template>
          </split-pane> -->
          <div class="prompt" v-if="isShowPrompt() && promptFlag">
            <span class="V7_iconfont V7_iconV7tubiao_tishi"></span>
            请发送PNG、JPEG、JPG、GIF格式的图片，文件大小控制在10M内
            <span class="V7_iconfont V7_iconV7tubiao_guanbi fr" @click="closePrompt"></span>
          </div>
          <webchatContentBox :webchatInfo="webchatInfo"></webchatContentBox>
          <div v-if="['webchat_leaveMessage', 'webchat_close', 'webchat_queue'].includes(webchatType)" class="webchatSendMsgBoxDisable"></div>
          <webchatSendMsg class="webchatSendMsgBox" :webchatInfo="webchatInfo" :webchatDisabled="['webchat_leaveMessage', 'webchat_close', 'webchat_queue'].includes(webchatType)"></webchatSendMsg>
        </div>
        <div class="rightInfo" v-if="containerType === 'v7Cloud'" v-show="!isEmpty">
          <commonSummary
            inputType="WEBCHAT"
           :visitorId="visitorId"
           :randomNum="randomNum"
           :propData="webchatData"
           :componentHeight="componentHeight"
           moduleType="webchatCard"
           :showListen="showListen"
           :showDowload="showDowload"
           @changeCustomerRelation="changeCustomerRelation">
          </commonSummary>
        </div>
      </div>
    </div>
    <webchatVideo
      v-if="videoInfo.isShowVideo"
      :replayUrl="videoInfo.videoUrl"
      :chatMsg="videoInfo.chatMsg"
      @closeVideoReplay="closeVideoReplay">
    </webchatVideo>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Watch } from 'vue-property-decorator'
import webchatContentBox from '@/views/webchat/webchatContentBox.vue'
import webchatHead from '@/views/webchat/webchatHead.vue'
import webchatSendMsg from '@/views/webchat/webchatSendMsg.vue'
import commonSummary from '@/components/commonSummary/index.vue'
import webchatVideo from '@/views/webchat/common/webchatVideo.vue'
import { WebchatModule } from '@/store/modules/webchat'
import { checkPermission } from '@/utils/directive'
@Component({
  name: 'webchatSummary',
  components: { webchatContentBox, webchatHead, webchatSendMsg, commonSummary, webchatVideo }
})
export default class WebchatSummary extends Vue {
  private $route: any
  private $store: any
  private $bus: any
  private showDowload: boolean = false
  private showListen: boolean = false

  private componentHeight = 330

  private randomNum = 0

  private webchatData = {}

  private promptFlag = true

  private visitorId: any = '' // 访客ID

  private videoInfo = { // 视频窗口参数
    isShowVideo: false, // 是否展示视频播放窗口
    videoUrl: '', // 地址
    chatMsg: {} // 会话信息
  }

  get isEmpty () {
    return this.$route.name === 'webchatCard' && this.$route.params && this.$route.params.id === 'empty'
  }

  get webchatInfo () { // 获取会话详情
    return this.$store.state.webchat.webchatInfo[this.$route.path.split('/')[4]] || {}
  }

  get containerType () {
    return this.$store.state.common.containerType
  }

  get webchatType () {
    return this.$route.path.split('/')[3] || ''
  }

  @Watch('$route')
  private routeChange (to: any, from: any) {
    if (to.path.split('/')[4] !== from.path.split('/')[4] || to.path.split('/')[3] !== from.path.split('/')[3]) {
      this.videoInfo.isShowVideo = false
    }
  }

  private isShowPrompt () { // 是否展示提示语
    // 只有在微信、小程序渠道下才显示提示语
    if (this.webchatType === 'webchat_todo' && (this.webchatInfo.platform === 'weixin' || this.webchatInfo.platform === 'wxmini')) {
      return true
    } else {
      return false
    }
  }

  private closePrompt () {
    this.promptFlag = false
  }

  private changeCustomerRelation (data: any) { // 更新客户外抛事件
    data.type = this.webchatType
    WebchatModule.UPDATE_CUSTOMER_INFO(data)
  }

  private closeVideoReplay () {
    this.videoInfo.isShowVideo = false
    this.videoInfo.videoUrl = ''
  }

  private mounted () {
    this.$bus.$on('renderWebchatSummary', (res: any) => {
      this.visitorId = res.chatSession.visitorId
      // 获取客户信息
      const actionData = {
        url: this.$store.state.common.session.account.mpShifted ? '/im-center/action/customerNew/locateCust' : '/im-center/action/customer/locateCust',
        method: 'POST',
        data: { visitorId: res.chatSession.visitorId }
      }
      WebchatModule.webchatCommonAction(actionData).then(resp => {
        if (resp) {
          this.webchatData = {
            importType: 'webchatTodo', // 在线待处理
            customerList: resp.data || [], // 客户列表
            webchatDetails: res.chatSession, // 在线详情
            processInfo: res.processInfo, // 流程信息
            visitorInfo: res.visitorInfo || {} // 访客信息
          }
          this.randomNum = Math.random() + 1
        }
      })
    })
    const initConfig = this.$store.state.common.initConfig
    const doMain = initConfig && initConfig.qiniuDomainMap ? initConfig.qiniuDomainMap.im : ''
    this.$bus.$on('webchatVideoReplay', (res: any) => { // 视频播放信息
      this.videoInfo.chatMsg = res.chatMsg
      this.videoInfo.videoUrl = doMain + '/' + res.chatMsg.content
      this.videoInfo.isShowVideo = true
    })
    if (checkPermission(null, { value: ['callSheet_audition'] })) { //  在线模块=》 联络记录的通话录音权限，按照数据中心的走
      this.showListen = true
      if (checkPermission(null, { value: ['callSheet_download'] })) {
        this.showDowload = true
      }
    }
  }

  private beforeMount () {
    if (checkPermission(null, { value: ['webchat_session_chat_tag'] })) {
      this.componentHeight = 330
    } else {
      this.componentHeight = 260
    }
  }

  private beforeDestroy () {
    this.$bus.$off('renderWebchatSummary')
    this.$bus.$off('webchatVideoReplay')
  }
}
</script>
<style lang="stylus" scoped>
  .webchatSummaryBox
    position relative
    height 100%
    width 100%
    .webchatSummary
      width 100%
      height 100%
      .webchatSummaryContent
        height 100%
        width 100%
        display flex
        background #fff
        overflow auto
        box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
        border-radius 10px
        .prompt
          position absolute
          height 40px
          line-height 40px
          background #FFFBE6
          width 100%
          color #303753
          padding 0 16px
          z-index 1
          .V7_iconV7tubiao_tishi
            color #FAAD14
            font-size 14px
            margin-right 7px
          .V7_iconV7tubiao_guanbi
            font-size 12px
            color #A6A6AE
            cursor pointer
        .content
          height 100%
          width 62%
          position relative
          border-right 1px solid $border-main
          .webchatContentBox
            height calc(100% - 216px)
          .webchatSendMsgBoxDisable
            background #FFFFFF
            opacity 0.8
            border-radius 10px
            z-index 1000
            height 130px
            margin 16px
            position absolute
            bottom -2px
            width 96%
            cursor not-allowed
          .webchatSendMsgBox
            height 130px
            margin 16px
            box-shadow 0px 1px 7px 0px rgba(157, 164, 173, 0.21)
            border 1px solid $border-main
            .newMsgNotice
              display inline-block
              width 100px
              height 28px
              text-align center
              line-height 28px
              background-color #FFFFFF
              border 1px solid #E7E9ED
              box-shadow 0px 1px 4px 0px rgba(221, 226, 229, 0.5)
              border-radius 4px
              color #008BEE
              cursor pointer
        .rightInfo
          height 100%
          padding 9px
          width 38%
    .empty:before
      content ''
      display block
      position absolute
      width 100%
      height 100%
      background white url('../../assets/img/no-data.png') no-repeat center center
      background-size 267px auto
      border-radius 10px
      z-index 11
      top 0
      bottom 0
</style>
